這並不是一個特定技術的教學文，我也是透過實作當中，不斷的找資料，達成想實作的需求喔。
今天想先使用 Vite + Vue 3 + Vue Router 先將環境給安裝起來。
請先安裝以下幾個工具。

先安裝 Node.js

在 Vite 的官方文件中有提到，要安裝 Vite 之前，需先安裝 Node.js，可直接到 Node.js 的官方網站中，參考安裝方式。

安裝好後，執行以下指令，確認目前執行的版本：

node -v

我的是 v16 以上的版本。

安裝 Vite + Vue 3

使用 Vite 安裝時，就可以直接選擇也要安裝 Vue 3，執行以下指令：

npm create vite@latest

會出現如下圖，也就是要建立的專案資料夾名稱，我這邊是輸入 webmix_efficiency：

然後可以選擇安裝 Vue，如下圖的選擇：

然後再選擇是否要使用 typescript 的語法，我沒有要使用，所以選擇第一個即可：

然後就會安裝好相關資料夾，接下來執行以下三個指令(第一個指令需換成自己的資料夾名稱)：

cd webmix_efficiency
npm install
npm run dev

然後就會產生一個 localhost 的本機端網站了，如下圖：

所以我的本機端網站是 http://localhost:5173 ，用瀏覽器開啟後，如下圖：

安裝 Vue Router

還剩下一個 Vue Router，也安裝起來，這可用來實作 單頁式應用程式(SPA: Single Page Application)，在專案資料夾中執行以下指令：

npm install vue-router@4 --save

結語

最近剛開始研讀 Vue 相關生態系的技術，所以對我來算也是個挑戰。